<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>tes</h1>
		{{    msg   }}
		{{ msg2 }}
	</div>
	<script>
	(function(global, factory) {
		global.Vue = factory();
	})(this, function() {
		function Vue(options) {
			this.el = options.el;
			this.data = options.data;
			this.init();
			this.observerFactory(this.data);
		}
		Vue.prototype = {
			init: function() {
				this.$el = this.getElement();
				this.cache = this.$el.innerHTML;
				this.regexp();
			},
			getElement: function() {
				return document.querySelector(this.el);
			},
			regexp: function() {
				var $html = this.cache;
				var len = $html.length;
				var regexp = /(\{\{\s*(\w*)\s*\}\})/g;
				var _this = this;
				while((regexp.exec($html))!=null) {
					console.log(this);
					$html = $html.replace(RegExp.$1, this.data[RegExp.$2]);
					regexp.lastIndex = regexp.lastIndex - RegExp.$1.length + this.data[RegExp.$2].length;
				}
				this.$el.innerHTML = $html;
			},
			observerFactory: function(data) {
				for(var property in data) {
					// console.log(this);
					this.addObserver(data, property, data[property]);
				}
			},
			addObserver: function(obj, property, val) {
				var _this = this;
				Object.defineProperty(obj, property, {
					enumerable: true,
					configurable: false,
					set: function(nval) {
						val = nval;
						_this.notify(obj, property, nval);
					},
					get: function() {
						return val;
					}
				});
			},
			notify: function(obj, property, val) {
				this.regexp();
			}
		}
		return Vue;
	});
	var app = new Vue({
		el: "#app",
		data: {
			msg: "hello",
			msg2: "hello2",
		}
	});
	</script>
</body>
</html>